<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>员工列表信息</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

<link rel="stylesheet"
	href="${pageContext.request.contextPath }/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="/layer/layer.css"/>
<script src="/layer/jquery-3.6.0.min.js"></script>
<script src="/layer/layer.js"></script>
<script src="${pageContext.request.contextPath }/layui/layui.js"></script>


<body>
	<fieldset class="layui-elem-field">
		<legend>员工信息管理</legend>
		<div class="layui-field-box">
			<div class="layui-form">
				<form action="/chauneno" method="post">
					<div class="layui-row layui-col-space10">
						<div class="layui-col-md2">
							<lable> 请输入员工编号： </lable>
						</div>
						<div class="layui-col-md2">
							<input class="layui-input" type="text" name="eno">
						</div>
						<div class="layui-col-md2">
							<select name="dept">
								<option value="0">请选择部门名称</option>
								<option value="保安部">保安部</option>
								<option value="科技组">科技组</option>
								<option value="人力资源部">人力资源部</option>
								<option value="设备管理部">设备管理部</option>
								<option value="外贸部">外贸部</option>
								<option value="总务处">总务处</option>
							</select>
						</div>
						<div class="layui-col-md2">
							<input type="submit"
								class="layui-icon layui-icon-search layui-btn layui-btn-primary"
								value="查 询">
						</div>
						<div class="layui-col-md2">
							<a name="add" type="submit"
								class="layui-btn layui-btn-primary"
								id="add"
								href='/addEmployee'>添加员工</a>
						</div>
					</div>
				</form>
			</div>
		</div>
	</fieldset>
	<!-- 	数据表格 -->
	<table class="layui-hide" id="test" lay-filter="demo"></table>
	<script>
		layui.use(['table'], function() {
			var table = layui.table;
			var $ = layui.jquery;

			table.render({
				elem : '#test',
				data : ${comployees},
				cellMinWidth : 120 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				,
				cols : [ [ {
					field : 'comployeeNo',
					width : 150,
					title : '员工编号',
					sort : true
				}, {
					field : 'comployeeName',
					width : 150,
					title : '姓名'
				}, {
					field : 'sex',
					title : '性别'
				}, {
					field : 'age',
					title : '年龄',
					sort : true
				}, {
					field : 'dept',
					title : '所在部门'
				},
				{
					field : 'profession',
					title : '现任职务'
				}, {
					field : 'address',
					title : '家庭地址'
				}, {
					field : 'phone',
					title : '联系方式'
				}, {
					field : 'comployeeStatus',
					title : '状态'
				}, {
					field : 'comployeeNo',
					title : '操作',
					width : 178,
					align : 'center',
					toolbar : '#barDemo'
				} ] ],
				page : true
			});

	
			
			//监听工具条
			table.on('tool(demo)', function(obj) {
				var data = obj.data;
				if (obj.event === 'update') {
					window.location.href="/toEditEmployee?eno="+obj.data.comployeeNo;
				}
				if(obj.event == "remove"){
					layer.confirm('确定删除此数据吗?', {
						btn : [ '确定', '取消' ]

					}, function() {
						window.location.href="/deleteEmployee?eno="+obj.data.comployeeNo
					});
				}
				
				console.log(obj)
			});
		});
	</script>

	<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-primary layui-btn-xs"  lay-event="update">修改</a>
			<button class="layui-btn layui-btn-primary layui-btn-xs"  lay-event="remove">删除</button>
	</script>

</body>
</html>
